<template>
  <div>
    <van-sticky>
      <van-tabs v-model:active="queryParams.IsMy" @click-tab="tabChange">
        <van-tab title="我发起的" name="1"> </van-tab>
        <van-tab title="需我处理" name="2"></van-tab>
      </van-tabs>
    </van-sticky>

    <div class="content" style="height: 100%">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        style="min-height: 100%"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          offset="300"
        >
          <div
            class="item"
            v-for="(item, index) in tabList"
            :key="index"
            @click="goDetail(item)"
          >
            <div class="label">
              {{ item.TypeName + "--" + item.PlaceName }}
            </div>
            <div class="value flex acenter">
              <van-tag size="large" :type="TypeStatus[item.State]">{{
                Types[item.State]
              }}</van-tag>
              <van-icon name="arrow" />
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script setup name="MySix">
import { GetSixSaleDataList_Page } from "@/api/sixManage/sixData.js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const queryParams = ref({
  Number: "", //6S问题编号
  Area: "", //区域ID
  Place: "", //场地ID
  Type: "", //6S问题分类ID
  Description: "", //问题描述
  State: "", //状态 1:待处理 2:待确认 3:已完成
  IsMy: "", //我的问题 1:我发起的 2:需我处理
  NoPage: "", //如果传"true"，则返回全部数据不分页
});
const page = ref({
  PageIndex: 0,
  PageSize: 10,
});
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const error = ref(false);
const Types = {
  1: "待处理",
  2: "待确认",
  3: "已完成",
};
const TypeStatus = {
  1: "danger",
  2: "warning",
  3: "success",
};

const Total = ref(0);
const tabList = ref([]);
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      tabList.value = [];
      refreshing.value = false;
    }
    page.value.PageIndex++;
    getList();
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  tabList.value = [];
  page.value.PageIndex = 0;
  loading.value = true;
  onLoad();
};

async function goDetail(item) {
  try {
    router.push({ path: "/SixManage/SixDetail", query: { ID: item.ID } });
  } catch (error) {
    console.log(error);
  }
}

async function getList(bool = false) {
  try {
    let query = {
      ...queryParams.value,
      ...page.value,
    };
    let res = await GetSixSaleDataList_Page(query);
    tabList.value = [...tabList.value, ...res.data.List];
    loading.value = false;
    Total.value = res.data.Total;
    if (tabList.value.length >= Total.value) {
      //将返回数据长度与总条数进行比较控制加载不加载的状态
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
}

function tabChange(val) {
  onRefresh();
}
</script>

<style lang="scss" scoped>
.content {
  background-color: white;
  border-radius: 5rpx;
  margin: 10rpx;
  .item {
    padding: 14rpx 10rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    &:last-child {
      border: none;
    }
  }
}
</style>
